<html>
<head>
    <title>Timeline demo</title>

    <style type="text/css">
        body {font: 10pt arial;}
    </style>

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript" src="../timeline.js"></script>
    <link rel="stylesheet" type="text/css" href="../timeline.css">

    <script type="text/javascript">
        var timeline = undefined;
        var data = undefined;

        google.load("visualization", "1");

        // Set callback to run when API is loaded
        google.setOnLoadCallback(drawVisualization);

        function getSelectedRow() {
            var row = undefined;
            var sel = timeline.getSelection();
            if (sel.length) {
                if (sel[0].row != undefined) {
                    row = sel[0].row;
                }
            }
            return row;
        }

        // Called when the Visualization API is loaded.
        function drawVisualization() {
            // Create and populate a data table.
            data = new google.visualization.DataTable();
            data.addColumn('datetime', 'start');
            data.addColumn('datetime', 'end');
            data.addColumn('string', 'content');

            data.addRows([
                [new Date(2010,07,23), , '<div>Conversation</div><img src="img/comments-icon.png" style="width:32px; height:32px;">'],
                [new Date(2010,07,23,23,00,00), , '<div>Mail from boss</div><img src="img/mail-icon.png" style="width:32px; height:32px;">'],
                [new Date(2010,07,24,16,00,00), , 'Report'],
                [new Date(2010,07,26), new Date(2010,08,02), 'Traject A'],
                [new Date(2010,07,28), , '<div>Memo</div><img src="img/notes-edit-icon.png" style="width:48px; height:48px;">'],
                [new Date(2010,07,29), , '<div>Phone call</div><img src="img/Hardware-Mobile-Phone-icon.png" style="width:32px; height:32px;">'],
                [new Date(2010,07,31), new Date(2010,08,03), 'Traject B'],
                [new Date(2010,08,04,12,00,00), , '<div>Report</div><img src="img/attachment-icon.png" style="width:32px; height:32px;">']
            ]);

            // specify options
            var options = {
                width:  "100%",
                height: "300px",
                editable: true // make the events dragable
            };

            // Instantiate our timeline object.
            timeline = new links.Timeline(document.getElementById('mytimeline'));

            // Make a callback function for the select event
            var onselect = function (event) {
                var row = getSelectedRow();
                document.getElementById("info").innerHTML += "event " + row + " selected<br>";
                // Note: you can retrieve the contents of the selected row with
                //       data.getValue(row, 2);
            }

            // callback function for the change event
            var onchange = function (event) {
                // retrieve the changed row
                var row = getSelectedRow();

                if (row != undefined) {
                    // request approval from the user.
                    // You can choose your own approval mechanism here, for example
                    // send data to a server which responds with approved/denied
                    var approve = confirm("Are you sure you want to move the event?");

                    if (approve)  {
                        document.getElementById("info").innerHTML += "event " + row + " changed<br>";
                    } else {
                        // new date NOT approved. cancel the change
                        timeline.cancelChange();

                        document.getElementById("info").innerHTML += "change of event " + row + " cancelled<br>";
                    }
                }
            };

            // callback function for the delete event
            var ondelete = function (event) {
                // retrieve the row to be deleted
                var row = getSelectedRow();

                if (row != undefined) {
                    // request approval from the user.
                    // You can choose your own approval mechanism here, for example
                    // send data to a server which responds with approved/denied
                    var approve = confirm("Are you sure you want to delete the event?");

                    if (approve)  {
                        document.getElementById("info").innerHTML += "event " + row + " deleted<br>";
                    } else {
                        // new date NOT approved. cancel the change
                        timeline.cancelDelete();

                        document.getElementById("info").innerHTML += "deleting event " + row + " cancelled<br>";
                    }
                }
            };


            // callback function for adding an event
            var onadd = function (event) {
                // retrieve the row to be deleted
                var row = getSelectedRow();

                if (row != undefined) {
                    // request approval from the user.
                    // You can choose your own approval mechanism here, for example
                    // send data to a server which responds with approved/denied
                    var title = prompt("Enter a title for the new event", "New event");

                    if (title != undefined)  {
                        data.setValue(row, 2, title);
                        document.getElementById("info").innerHTML += "event " + row + " created<br>";
                        timeline.redraw();
                    } else {
                        // cancel adding a new event
                        timeline.cancelAdd();

                        document.getElementById("info").innerHTML += "creating event " + row + " cancelled<br>";
                    }
                }
            }

            // Add event listeners
            google.visualization.events.addListener(timeline, 'select', onselect);
            google.visualization.events.addListener(timeline, 'change', onchange);
            google.visualization.events.addListener(timeline, 'delete', ondelete);
            google.visualization.events.addListener(timeline, 'add', onadd);

            // Draw our timeline with the created data and options
            timeline.draw(data, options);
        }
    </script>
</head>

<body>
<p>This page demonstrates the timeline visualization.</p>
<p>Click and drag to move the timeline, scroll to zoom the timeline.
    Click and drag events to change there date.
    You will be asked for confirmation before changes are actually applied.</p>
<div id="mytimeline"></div>

<!-- Information about where the used icons come from -->
<p style="color:gray; font-size:10px; font-style:italic;">
    Icons by <a href="http://dryicons.com" target="_blank" title="Aesthetica 2 Icons by DryIcons" style="color:gray;" >DryIcons</a>
    and <a href="http://www.tpdkdesign.net" target="_blank" title="Refresh Cl Icons by TpdkDesign.net" style="color:gray;" >TpdkDesign.net</a>
</p>

<div id="info"></div>
</body>
</html>
